<template>
  <el-main>
    <h3>联系人信息列表</h3>
    <div class="top">
      <div>
        <el-button type="primary">新增联系人</el-button>
        <el-button type="primary">机构信息</el-button>
      </div>
      <div>
        <el-form>
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="请输入关键字" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="全部">
              <el-option label="全部" value="0" />
              <el-option label="编号" value="1" />
              <el-option label="机构名称" value="2" />
              <el-option label="机构级别" value="3" />
              <el-option label="省份" value="4" />
              <el-option label="市名" value="5" />
              <el-option label="经办人" value="6" />
              <el-option label="联系人" value="7" />
              <el-option label="审核状态" value="8" />
              <el-option label="重要级别" value="9" />
              <el-option label="分配情况" value="10" />
              <el-option label="商机状态" value="11" />
              <el-option label="标签名" value="12" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- ======================表格======================== -->
    <div>
      <el-table
        ref="multipleTableRef"
        style="width: 100%"
        :data="ContactData.list"
      >
        <el-table-column type="selection" />
        <el-table-column prop="number" label="编号" />
        <el-table-column prop="jigou" label="机构名称" />
        <el-table-column prop="name1" label="姓名" width="80" />
        <el-table-column prop="sex" label="性别" width="80" />
        <el-table-column prop="job" label="职务" />
        <el-table-column prop="phone" label="手机" />
        <el-table-column prop="tel-phone" label="办公电话" />
        <el-table-column prop="impotant" label="重要等级" />
        <el-table-column prop="genjing" label="跟进状态" />
        <!-- =============================== -->
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button size="small">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRow(scope.row)"
              >删除</el-button
            >
            <el-button
              size="small"
              type="check"
              @click.prevent="detail(scope.row)"
              >查看</el-button
            >
          </template></el-table-column
        >
        <!-- ============================= -->
      </el-table>
    </div>
    <!-- ================================================== -->
  </el-main>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
// ===========表格===================
var formInline = ref({
  user: "",
  region: "",
});
var router = useRouter();
//定义响应式数据
var ContactData = reactive({ list: [] });

onMounted(() => {
  axios.get("/api/info/list").then((res) => {
    console.log(res.data.list);
    ContactData.list = res.data.list;
  });
});

var deleteRow = (row) => {
  axios.post("/api/info/delete", { id: row.id }).then((res) => {
    console.log("delete", res.data);
    ContactData.list = res.data.list;
  });
};
// =====================================
//查看详细信息页;
var detail = (row) => {
  console.log(row);
  axios.post("/api/user/search", { id: row.id }).then((res) => {
    console.log("searchuseinfo_user_list", res.data);
    router.push({
      path: "/index/home/lzn/infoManage/InfoDetail",
      query: row,
    });
  });
};

// =====================================
</script>

<style lang='scss' scoped>
.el-main {
  padding: 0;
  margin: 0;
}
h3 {
  padding: 0;
  text-align: center;
}
.top {
  display: flex;
  justify-content: space-between;
  div {
    display: inline-block;
    span {
      display: inline-block;
    }
  }
}
.el-form-item {
  margin-right: 10px;
}
.el-table {
  text-align: center;
}
</style>